Customizing Gauge

You can customize the appearance of Gauges in Cloud Business App Edition by applying styles from a stylesheet file, through JavaScript. Place the desired css file at an appropriate location within your application and use JavaScript to apply the style from that css file.

The following image shows how Gauges (LinearGauge, BulletGraph, and Radial Gauge) appear after applying the desired style.

The example below shows how to apply styling to LinearGauge control through JavaScript. It makes use of a wijmo.custom.css file which has information about styling for gauge control. It uses ApplicationData.Fruits data from a local database file ApplicationData.mdf. If your wijmo.custom.css file is placed in Content folder within your application, then your JavaScript code will appear as shown below.

To write code in JavaScript:

JavaScript	Copy Code
myapp.GaugeStyling.LinearGauge_render = function (element, contentItem) { $(element).addClass("custom-gauge"); if ($("#customCss").length == 0) { $("<link id='customCss' rel='stylesheet' type='text/css' href='Content/wijmo.custom.css' />").appendTo($("head")); } var gauge = new c1.cba.LinearGauge($(element), contentItem); };

JavaScript

Copy Code

myapp.GaugeStyling.LinearGauge_render = function (element, contentItem) {
        $(element).addClass("custom-gauge");
        if ($("#customCss").length == 0) {
                $("<link id='customCss' rel='stylesheet' type='text/css' href='Content/wijmo.custom.css' />").appendTo($("head"));
        }
        var gauge = new c1.cba.LinearGauge($(element), contentItem);
};